﻿
@{
    ViewBag.Title = "Account";
}
@section header{
    <link href="~/Content/datatable/dataTables.bootstrap.css" rel="stylesheet" />
}
<section class="content-header">
    <h1>
        Tasks
        <small>all tasks</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Admin</a></li>
        <li class="active">Task</li>
    </ol>
</section>
<section class="content">
    <div class="box">
        <div class="box-body">
            <div id="toolbar">
                <a onclick="newTask()" class="btn btn-primary btn-sm">新增任务</a>
            </div>
            <table id="datalist" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>TaskName</th>
                        <th>TaskParam</th>
                        <th>CronExpressionString</th>
                        <th>ApiUri</th>
                        <th>CreateTime</th>
                        <th>Remark</th>
                        <th>Operate</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>TaskName</th>
                        <th>TaskParam</th>
                        <th>CronExpressionString</th>
                        <th>ApiUri</th>
                        <th>CreateTime</th>
                        <th>Remark</th>
                        <th>Operate</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <!-- /.box-body -->
    </div>
    <div id="div_task" class="row" style="display:none">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title">任务信息</h3>
                </div>
                <form role="form">
                    <div class="box-body" id="form-body">
                        <div class="input-group">
                            <span class="input-group-addon">任务名称</span>
                            <input type="text" id="TaskName" class="form-control" style="width:600px;" placeholder="请输入任务名">
                            @*<span class="badge bg-red">*建议为英文</span>*@
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">任务参数</span>
                            <input type="text" id="TaskParam" class="form-control" style="width:600px;" placeholder="请输入任务参数">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">定时规则</span>
                            <input type="text" id="CronExpressionString" class="form-control" style="width:600px;" placeholder="格式：s m H d M Day-of-Week y">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">任务接口</span>
                            <input type="text" id="ApiUri" class="form-control" style="width:600px;" placeholder="例如：/Home/Index">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">任务备注</span>
                            <input type="text" id="Remark" class="form-control" style="width:600px;" placeholder="">
                        </div>
                    </div>
                    <div class="box-footer">
                        <a id="btnSave" href="javascript:void(0);" class="btn btn-primary">提交</a>
                        <a id="btnHideDiv" href="javascript:void(0)" class="btn btn-primary">取消</a>
                    </div>
                </form>
            </div><!-- /.box -->
        </div>
    </div>
</section>

<script src="~/Content/datatable/jquery.dataTables.min.js"></script>
<script src="~/Content/datatable/dataTables.bootstrap.min.js"></script>
@*<script src="~/Content/js/task_index.js"></script>*@
<script>
    var table = null;
    $(function () {
        table = $("#datalist").DataTable({
            lengthChange: false,//分页大小调整
            searching: false,
            pageLength: 10,//分页大小
            ordering: false,
            serverSide: true,  //启用服务器端分页
            order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
            ajax: function (data, callback, settings) {
                var param = {};
                param.pagesize = data.length;
                param.pageindex = (data.start / data.length) + 1;//当前页码
                $.ajax({
                    type: "Post",
                    url: "/Task/Page",
                    cache: false,  //禁用缓存
                    data: param,
                    dataType: "json",
                    success: function (result) {
                        if (result.status != 1)
                            alert(result.msg || '获取失败');

                        //封装返回数据
                        var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.page.total;//返回数据全部记录
                        returnData.recordsFiltered = result.page.total;//后台不实现过滤功能，每次查询均视作全部结果
                        returnData.data = result.data;//返回的数据列表
                        callback(returnData);
                    }
                });
            },
            columns: [
                { "data": "Id" },
                { "data": "TaskName" },
                { "data": "TaskParam" },
                { "data": "CronExpressionString" },
                { "data": "ApiUri" },
                { "data": "CreatedTime" },
                { "data": "Remark" },
                {
                    "data": function (rowData, type, set, meta) {
                        var btn = '<a href="javascript:update(' + meta.row + ')">修改</a>';
                        var setstate = rowData.Status == 1 ? 0 : 1;
                        var operate = rowData.Status == 1 ? '禁用' : '启用';
                        btn += '&nbsp;|&nbsp;<a href="javascript:setStatus(' + rowData.Id + ',' + setstate + ')">' + operate + '</a>';
                        btn += '&nbsp;|&nbsp;<a href="javascript:setStatus(' + rowData.Id + ',-1)">删除</a>';
                        return btn;
                    }
                },
            ]
        });
        $('#btnSave').bind('click', saveTask);
    })
    function reload() {
        //table.ajax.reload();//分页重置
        table.ajax.reload(null, false);//分页信息保留
    }
    function newTask() {
        $('#form-body').removeAttr('data-id');
        $('#div_task').show();
    }
    function update(rowindex) {
        var model = table.row(rowindex).data();
        $('#form-body').attr('data-id', model.Id);
        $('#form-body input').each(function () {
            var propname = $(this).attr('id');
            if (model[propname])
                $(this).val(model[propname])
        })
        $('#div_task').show();
    }
    function saveTask() {
        var model = new Object;
        var validated = true;
        $('#form-body input').each(function () {
            var propname = $(this).attr('id');
            if (propname != 'Remark' && !$(this).val().length) {
                alert('请输入' + $(this).prev().html());
                validated = false;
                return false;
            }
            model[propname] = $(this).val();
        })
        if (!validated) return;
        var action = '/Task/Add';
        var tid = $('#form-body').attr('data-id');
        if (tid && tid.length > 0) {
            model.Id = tid;
            action = '/Task/Update';
        }
        $.ajax({
            url: action,
            type: 'post',
            data: model,
            dataType: "json",
            success: function (e) {
                if (e.status == 1) {
                    alert('操作成功');
                    reload();
                } else {
                    alert(e.msg || '更新失败');
                }
            }
        })
    }
    function setStatus(id, state) {
        $.ajax({
            url: '/Task/SetStatus',
            type: 'post',
            data: {
                id: id,
                state: state
            },
            dataType: "json",
            success: function (e) {
                if (e.status == 1) {
                    alert('操作成功');
                    reload();
                } else {
                    alert(e.msg || '操作失败');
                }
            }
        })
    }
</script>
